<template>
  <div class="container mx-auto min-h-screen py-8 px-4">
    <div
      class="w-full bg-gray-50 rounded-xl shadow-lg p-6 flex flex-col min-h-[calc(100vh-4rem)]">
      <!-- 返回按钮 -->
      <div class="mb-4">
        <button
          @click="goBack"
          class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-md transition-colors duration-200">
          返回题库
        </button>
      </div>

      <!-- 问题计数 -->
      <div class="text-right text-gray-600 mb-4">
        第 {{ currentIndex + 1 }} 题 / 共 {{ questionData.length }} 题
      </div>

      <!-- 当前问题 -->
      <div
        v-if="questionData[currentIndex]"
        class="question-container flex-grow">
        <div class="question-title text-xl font-semibold text-gray-800 mb-4">
          {{ questionData[currentIndex].title }}
        </div>
        <div
          class="question-content text-gray-700 leading-relaxed"
          v-html="questionData[currentIndex].content"></div>
      </div>

      <!-- 导航按钮 -->
      <div class="navigation-buttons flex justify-between mt-8">
        <button
          @click="prevQuestion"
          :disabled="currentIndex === 0"
          class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors duration-200 disabled:bg-gray-300 disabled:cursor-not-allowed">
          上一题
        </button>
        <button
          @click="nextQuestion"
          :disabled="
            currentIndex === questionData.length - 1 ||
            questionData.length === 0
          "
          class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors duration-200 disabled:bg-gray-300 disabled:cursor-not-allowed">
          下一题
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const id = route.query.id;

const { data: questionList } = await useFetch(
  `http://47.113.230.113:8088/question/answers/${id}`
);

const questionData = questionList.value?.data?.answers || [];
const currentIndex = ref(0);
// 返回上一页功能
const goBack = () => {
  router.back();
};
// 上一题函数
const prevQuestion = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
  }
};

// 下一题函数
const nextQuestion = () => {
  if (currentIndex.value < questionData.length - 1) {
    currentIndex.value++;
  }
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 69vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 100%;
}

// 移除max-width限制，改为100%宽度
.w-full {
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  margin: 0;
  padding: 1rem;
}

.question-container {
  background-color: white;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.question-title {
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.question-content {
  flex-grow: 1;
  p {
    margin-bottom: 1rem;
  }
  ul,
  ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
  }
  li {
    margin-bottom: 0.5rem;
  }
}

.navigation-buttons {
  button {
    font-weight: 500;
    outline: none;
    border: none;
  }
  button:not(:disabled) {
    cursor: pointer;
  }
}
/* 返回按钮样式 */
button[class*="bg-gray-200"] {
  font-weight: 500;
  outline: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .w-full {
    padding: 0.5rem;
  }
  .question-container {
    padding: 1rem;
  }
}
</style>
